import React, { Component, useState } from 'react';
import { postDetail, getStatistics } from '../../../api/modules/activies.js';
import AddTitle from '../components/addTitle/index';
import { Button, Card, Row, Col, Tabs, DatePicker } from 'antd';
const { TabPane } = Tabs;
import CounterList from './couutTags/index';
import './index.less';

class DetailActive extends Component {
  state = {
    title: ['创建活动', '详情'],
    res: '',
    res2: '',
    queryData: {
      activityBasicId: Number(this.props.location.query.id),
      /*  startDate: '2017-07-01 00:00:00',
       endDate: "2017-07-07 00:00:00",
       activityStatisticalType: 2 */
    },
  };
  getList = async () => {
    try {
      const { data: res1 } = await postDetail({
        activityBasicId: Number(this.props.location.query.id),
      });
      console.log(res1, 'xq');
      this.setState({
        res: res1,
      });
    } catch (error) {
      console.log('报错了');
    }
  };
  getList2 = async () => {
    try {
      const { data: res1 } = await getStatistics(this.state.queryData);
      console.log(res1, 'tj');
      this.setState({
        res2: res1,
      });
    } catch (error) {
      console.log('报错了');
    }
  };
  componentDidMount() {
    this.getList();
  }
  callback = (key) => {
    console.log(key);
  };
  render() {
    const { activityStatus } = this.props.location.query;
    const { res } = this.state;
    return (
      <div>
        <AddTitle title={this.state.title}></AddTitle>
        <Card className="paddingwidth">
          <Tabs defaultActiveKey="2" onChange={this.callback}>
            <TabPane tab="统计" key="1">
              {/* 详情 */}
              <div className="detailTitle">
                <div className="left">
                  活动名称：
                  {res.activityName}
                </div>
                <div className="right">
                  <div className="top">状态</div>
                  <div className="blue">
                    {activityStatus == 1 ? '待审核' : ''}
                    {activityStatus == 2 ? '进行中' : ''}
                    {activityStatus == 3 ? '未开始' : ''}
                    {activityStatus == 4 ? '已驳回' : ''}
                    {activityStatus == 5 ? '已结束' : ''}
                    {activityStatus == 6 ? '已关闭' : ''}
                  </div>
                </div>
              </div>
              <div className="contnet">
                <Row gutter={[0, 40]}>
                  <Col span={1.5}>活动地点：</Col>
                  <Col span={22.5}>活动地点：</Col>
                </Row>
                <Row gutter={[0, 40]}>
                  <Col span={1.5}>活动时间：</Col>
                  <Col span={22.5}>{res.startDate + '~' + res.endDate}</Col>
                </Row>
                <Row gutter={[0, 40]}>
                  <Col span={1.5}>活动内容：</Col>
                  <Col span={22.5}>{res.activityContent}</Col>
                </Row>
                <Row gutter={[0, 40]}>
                  <Col span={1.5}>日程安排：</Col>
                  <Col span={22.5}>吃饭睡觉打豆豆！！！</Col>
                </Row>
                {activityStatus == 4 ? (
                  <Row gutter={[0, 40]}>
                    <Col span={1.5}>驳回原因：</Col>
                    <Col span={22.5}>无</Col>
                  </Row>
                ) : (
                  ''
                )}
              </div>
              <div className="lefttobottom">
                {activityStatus == 1 ? (
                  <Button onClick={() => history.go(-1)}>返回</Button>
                ) : (
                  ''
                )}
                {activityStatus == 2 ? (
                  <div>
                    {' '}
                    <Button onClick={() => history.go(-1)}>返回</Button>
                    <Button type="primary" onClick={() => history.go(-1)}>
                      关闭
                    </Button>
                  </div>
                ) : (
                  ''
                )}
                {activityStatus == 5 || activityStatus == 3 ? (
                  <div>
                    <Button onClick={() => history.go(-1)}>返回</Button>
                    <Button type="primary" onClick={() => history.go(-1)}>
                      删除
                    </Button>
                  </div>
                ) : (
                  ''
                )}
                {activityStatus == 4 ? (
                  <div>
                    <Button onClick={() => history.go(-1)}>返回</Button>
                    <Button onClick={() => history.go(-1)}>重新发布</Button>
                    <Button type="primary" onClick={() => history.go(-1)}>
                      关闭
                    </Button>
                  </div>
                ) : (
                  ''
                )}
                {activityStatus == 5 ? '已结束' : ''}
                {activityStatus == 6 ? '已关闭' : ''}
              </div>
            </TabPane>
            <TabPane tab="活动信息" key="2">
              <CounterList></CounterList>
            </TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}

export default DetailActive;
